import Vue from 'vue'
import VueRouter from "vue-router";
import Article from '../views/Article.vue'
import Like from '../views/Like.vue'
import PaoBu from '../views/PaoBu.vue'
import LanQiu from '../views/LanQiu.vue'
import Layout from '../views/Layout.vue'
import Collect from '../views/Collect.vue'
import User from '../views/User.vue'
import ArticalDetail from '../views/ArticleDetail.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    // { path: '/', redirect: '/article'},
    // keep-alive 缓存组件的时候，只能缓存当前一级
    { 
      // 多级路由的路径问题
      path: '/',  // path换成 '/a' 试试效果
      component: Layout, // 这个组件一般是布局组件，不是业务组件，path路径一般写/
      children: [
        // 路由path里面的 / 影响很大，如果写了，就是他自己的地址，如果不写/，就是和上级路由将地址拼接起来
        { path: '/article', component: Article },
        { 
          path: '/like', 
          component: Like,
          children: [
            { path: 'lanqiu', component: LanQiu },
            { path: '/like/paobu', component: PaoBu },
          ] 
        },
        { path: '/collect', component: Collect},
        { path: '/user', component: User},
      ]
    },
    {
      path: '/detail/:id',  // 在js里面通过 this.$router.params.id
      component: ArticalDetail
    },
  ]
})

export default router